<!--我的优惠详情-->
<template>
  <div class="mypreferential">
    <van-tabs @click="onClick">
      <van-tab title="红包">
        <div class="div2">
          <div class="div2_jxgdiv">
            有<span>{{ length }}</span
            >个即将到期
          </div>
          <div class="descriptionH" @click="instructionsclick">
            <i class="iconfont icon-wenhao a1"></i>
            <span class="descriptionH_span">红包说明</span>
          </div>
        </div>
        <div
          class="redenvelopesH"
          v-for="(item, index) in listshbs"
          :key="index"
        >
          <ul class="marryH">
            <li class="lis_H">
              <span class="marryH_p">￥</span
              ><span class="marryH_s">{{ listshbs[index].amount }}</span>
            </li>

            <li>{{ listshbs[index].description_map.sum_condition }}</li>
          </ul>

          <ul class="shareH">
            <li class="shareH_envelopes">{{ listshbs[index].name }}</li>
            <li>{{ listshbs[index].description_map.validity_periods }}</li>
            <li>{{ listshbs[index].description_map.phone }}</li>
          </ul>

          <ul class="timeH">
            <li class="timeH_times">
              {{ listshbs[index].description_map.validity_delta }}
            </li>
          </ul>
        </div>
        <div class="introduce_H">
          <div>限品类：快餐便当、特色菜系、小吃夜宵、甜品饮品、异国料理</div>
        </div>
        <div class="hisoryH" @click="hisoryRed">
          <span>查看历史红包</span>
          <i class="iconfont icon-fanhui2 iconi"></i>
        </div>
      </van-tab>
      <!-- 第二模块-->
      <van-tab title="商家代金卷">
        <div class="instructions" @click="thebalancethat">
          <span>商家代金卷说明</span>
          <i class="iconfont icon-wenhao"></i>
        </div>
        <div class="instructions2">
          <img
            src=""
            alt=""
          />
          <p class="instructions2_p1">无法使用代金券</p>
          <p class="instructions2_p2">非客户端或客户端版本过低</p>
          <span class="instructions2_p3" @click="downloadclick"
            >下载或升级客户端</span
          >
        </div>
      </van-tab>
    </van-tabs>
    <router-view />

    <van-tabbar route>
      <van-tabbar-item replace to="/My_A_Btab_Ch">兑换红包</van-tabbar-item>
      <van-tabbar-item replace to="/My_A_Btab_Ct">推荐有奖</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Vue from 'vue';
import { Tab, Tabs } from 'vant';
import { Tabbar, TabbarItem } from 'vant';
Vue.use(TabbarItem)
Vue.use(Tabbar);

Vue.use(Tab);
Vue.use(Tabs);
export default {
  name: "Mypreferential",
  data: function () {
    return { listshbs: [], length: 0 };
  },
  created() {
    this.$axios(
      "https://elm.cangdu.org/promotion/v2/users/1/hongbaos?limit=20&offset=0"
    )
      .then((res) => {
        console.log(res)
        this.listshbs = res;
        this.length = this.listshbs.length;
      })
      .catch((err) => console.log(err));
  },
  methods: {
    onClick() {},
    thebalancethat() {
      this.$router.push({ name: "Myvouchers" });
    },
    downloadclick() {
      this.$router.push({ name: "Download" });
    },
    instructionsclick() {
      this.$router.push({ name: "My_A_Btext_C" });
    },
    hisoryRed() {
      this.$router.push({ name: "My_A_Bhistory_C" });
    },
  },
};
</script>

<style lang="less">
html {
  background-color: #f5f5f5;
}
.van-tabs__line {
  //   bottom: 22px;
  height: 2px;
  background-color: #3190e8;
}
.goods-card {
  margin: 0;
  background-color: blue;
}

.delete-button {
  height: 100%;
}
.van-tab--active {
  color: #3190e8;
}

.instructions {
  width: 100%;
  height: 46.88px;
  padding-right: 10px;
  color: #3190e8;
  box-sizing: border-box;
  padding-right: 10px;
  i {
    float: right;
    font-size: 25px;
    margin-top: 13px;
  }
  span {
    float: right;
    font-size: 12px;
    margin-top: 20px;
  }
}
.instructions2 {
  margin-top: 93.75px;
  text-align: center;
  .iconfont {
    font-size: 20px;
  }
  img {
    width: 140px;
    height: 80px;
  }
  .instructions2_p1 {
    height: 21.33px;
    margin: 9px 0;
    color: #666;
  }
  .instructions2_p2 {
    height: 16px;
    margin: 7.031px 0;
    font-size: 12px;
    color: #999;
  }

  .instructions2_p3 {
    padding: 7.031px;
    display: inline-block;
    background-color: #56d176;
    border-radius: 5px;
    font-size: 16px;
    margin-top: 7.031px;
    color: #fff;
  }
}
.mypreferential {
  .div2 {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    height: 30px;
    align-items: center;
    .div2_jxgdiv{
      font-size: 12px;
      color:#666666;
      margin-left: 8px;
    }
    span {
      color: #ff5340;
    }

    .descriptionH {
      .descriptionH_span {
        font-size: 12px;
      }
      span {
        color: #3190e8;
        vertical-align: middle;
      }
      .a1 {
        font-size: 25px;
        color: #3190e8;
        vertical-align: middle;
      }
    }
  }
  .redenvelopesH {
    width: 342px;
    height: 100px;
    margin: auto;
    border-radius: 5px;
    background-color: #ffffff;
    display: flex;
    justify-content: space-around;
    border-top: 4px solid red;
    margin-top: 10px;
    .marryH,
    .shareH,
    .timeH {
      border-top: 2px dashed red;
      height: 58px;
      padding-top: 20px;
      padding-left: 10px;
      padding-right: 10px;
      font-size: 12px;
      color: #999999;
    }

    .lis_H {
      color: #ff4127;
      font-size: 18.5px;
      font-weight: 900;
    }
    .marryH_p {
      font-size: 17.75px;
      font-weight: 700;
    }
    .marryH_s {
      font-size: 35px;
      font-weight: 500;
    }
    .shareH_envelopes {
      font-size: 16.5px;
      color: #666666;
    }
    .timeH_times {
      color: #ff5340;
      font-size: 17px;
    }
  }
  .van-tabs__line {
    background-color: #aaff;
  }
  .van-tab--active {
    color: #aaff;
  }
  .introduce_H {
    background-color: #f9f9f9;
    width: 342px;
    height: 50px;
    margin: auto;
    border-radius: 5px;
    div {
      padding: 10px 20px;
      font-size: 12px;
      color: #999999;
    }
  }
  .hisoryH {
    margin-top: 20px;
    text-align: center;
    font-size: 12px;
    color: #999999;

    .iconi {
      margin-left: 5px;
      font-size: 12px;
    }
  }
}
.van-tabbar-item__text{
  font-size: 17px;
}
</style>